<template>
  <div class="">
    <div class="outer_wrapper">
      <div class="inner_wrapper">
        <div class="box">利用height:0; padding-bottom: 50%;</div>
      </div>
    </div>
    <div class="wrapper">
      <div class="box">利用calc和vw</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  // 实现一个div垂直居中, 其距离屏幕左右两边各10px,
  // 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。
</script>

<style lang="less" scoped>
  /* 方法1：利用height:0; padding-bottom: 50%;*/
  .outer_wrapper {
    margin: 0 10px;
    height: 100%;
    /* div垂直居中*/
    display: flex;
    align-items: center;
    .inner_wrapper {
      background: rgb(255, 199, 199);
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 50%;
      .box {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
      }
    }
  }

  /*  方法2：利用calc和vw */
  .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    .box {
      margin-left: 10px;
      width: calc(100vw - 20px);
      /*  宽度的一半 */
      height: calc(50vw - 10px);
      position: absolute;
      background: rgb(218, 255, 170);
      /* 让块垂直居中 */
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
    }
  }
</style>
